<template>
  <!-- <div :id="hlsId" /> -->
  <div id="dplayer" class="player"></div>
</template>
<script>
import Player, { Events } from "xgplayer";
import HlsPlugin from "xgplayer-hls";
import "xgplayer/dist/index.min.css";
export default {
  props: {
    url: {
      type: String,
      default: null,
    },
    poster: {
      type: String,
      default: "",
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return{
      player: null,
    }
  },
  // computed: {
  //   hlsId() {
  //     return "hls" + Math.floor(1000000000 + Math.random() * 9000000000);
  //   },
  // },
  mounted() {
    this.initVideo();
  },
  methods: {
    destroy() {
      this.player && this.player.destroy();
    },
    initVideo() {
      this.destroy();
      // const { width,height,poster,autoplay } = this;
      const vWidth = document.body.clientWidth;
      // let url =
      //   "https://wendao.mhjyy.cn/hls/20240902153200/e63d4fe7999f488288618396ee8f762c.m3u8";
      let options = {
        width: vWidth,
        height:'100%',
        el: document.querySelector(".player"),
        url: this.url,
        fitVideoSize: 'fixWidth',
        videoFillMode:'contain',
        poster:this.poster
      };
      if (
        document
          .createElement("video")
          .canPlayType("application/vnd.apple.mpegurl")
      ) {
        console.log(1);
        // 原生支持 hls 播放
        this.player = new Player(options);
      } else if (HlsPlugin.isSupported()) {
        // 第一步
        console.log(2);
        this.player = new Player({
          ...options,
          isLive: false,
          plugins: [HlsPlugin], // 第二步
        });
      }
      this.player.on(Events.READY, () => {
        document.querySelector(".player").querySelector("video").style =
          "width:100vw;";
      });
      // this.player.on(Events.FULLSCREEN_CHANGE, (isFullscreen) => {
      //   if (isFullscreen) {
      //     console.log('全屏TODO')
      //     // 全屏TODO
      //   } else {
      //     // 退出全屏TODO
      //     document.querySelector(".player").querySelector(".xgplayer-controls").style =
      //     "visibility:visible;";
      //     console.log('退出全屏TODO')
      //   }
      // })
    },
  },
  beforeDestroy() {
    this.destroy();
  },
};
</script>
<style>
  .xgplayer-start{
    background: black;
    opacity: 0.7;
    border-radius: 50%;
  }
</style>
